<template>
    <div>
        <div ref="chartContainer" class="3d-pie-chart"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as d3 from 'd3';

const chartContainer = ref(null);
let rotation = 0;
let autoRotateInterval = null;

// 3D配置参数
const config = {
    width: 600,
    height: 500,
    thickness: 20,  // 3D厚度
    angle: 15,      // 视角倾斜角度
    rotationSpeed: 0.02
};

const data = [
    { value: 30, label: 'Food' },
    { value: 50, label: 'Rent' },
    { value: 20, label: 'Entertainment' },
];

onMounted(() => {
    const { width, height, thickness, angle } = config;

    // 创建SVG容器
    const svg = d3.select(chartContainer.value)
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', `translate(${width / 2},${height / 2})`);

    // 创建3D投影计算器
    const project3D = (point) => {
        const angle = Math.PI / 6; // 30度视角
        return [
            point[0] + point[2] * Math.cos(angle),
            point[1] - point[2] * Math.sin(angle)
        ];
    };

    // 创建渐变定义
    const defs = svg.append('defs');
    const createGradient = (id, color) => {
        const gradient = defs.append('linearGradient')
            .attr('id', id)
            .attr('x1', '0%').attr('y1', '0%')
            .attr('x2', '100%').attr('y2', '100%');

        gradient.append('stop').attr('offset', '0%').style('stop-color', d3.color(color).brighter(0.6));
        gradient.append('stop').attr('offset', '100%').style('stop-color', d3.color(color).darker(0.3));
        return gradient;
    };

    // 生成3D扇形路径
    const create3DArc = (startAngle, endAngle) => {
        const arc = d3.arc()
            .innerRadius(0)
            .outerRadius(150)
            .startAngle(startAngle)
            .endAngle(endAngle);

        const top = arc();

        // 创建侧面路径
        const sidePath = d3.arc()
            .innerRadius(0)
            .outerRadius(thickness)
            .startAngle(startAngle)
            .endAngle(endAngle);

        return {
            top,
            side: sidePath()
        };
    };

    // 绘制3D扇形
    const draw3DSlice = (d, i) => {
        const color = d3.schemeCategory10[i];
        const gradientId = `gradient-${i}`;
        createGradient(gradientId, color);

        // 绘制侧面
        svg.append('path')
            .attr('d', d.side)
            .style('fill', `url(#${gradientId})`)
            .style('stroke', '#333')
            .style('stroke-width', 0.5);

        // 绘制顶部
        svg.append('path')
            .attr('d', d.top)
            .style('fill', color)
            .style('stroke', '#fff')
            .style('stroke-width', 1);
    };

    // 生成3D饼图数据
    const pie = d3.pie()
        .value(d => d.value)
        .sort(null)(data);

    // 初始化绘制
    pie.forEach((d, i) => {
        const arcData = create3DArc(d.startAngle, d.endAngle);
        draw3DSlice(arcData, i);
    });

    // 自动旋转
    autoRotateInterval = setInterval(() => {
        rotation += config.rotationSpeed;
        svg.attr('transform', `rotate(${rotation})`);
    }, 50);

    // 鼠标交互
    svg.on('mousemove', (event) => {
        const [x, y] = d3.pointer(event);
        const rotateX = (y / height - 0.5) * 60;
        const rotateY = (x / width - 0.5) * 60;
        svg.attr('transform', `rotateX(${rotateX}) rotateY(${rotateY})`);
    });
});

onUnmounted(() => {
    clearInterval(autoRotateInterval);
});
</script>

<style scoped>


</style>